<template>
  <div :class="['content-box', minWidth ? 'w1000' : '']">
    <div class="content-title">
      <span class="title-font">{{ title }}</span>
      <div class="right-btn">
        <el-button v-if="showReload" class="info-btn btn top-font" icon="el-icon-refresh" type="text"
                   @click="handleReload">刷新
        </el-button>
        <slot name="right"></slot>
      </div>
    </div>
    <div class="content-container">
      <slot></slot>
    </div>
    <div class="footer-container">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContentCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    minWidth: {
      type: Boolean,
      default: true
    },
    showReload: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {}
  },
  methods: {
    handleReload() {
      this.$emit('reload');
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.content-box {
  box-sizing: border-box;
  margin-top: 24px;
  box-shadow: 0 0 10px #eee;
  width: 100%;
  background: #fff;

  .content-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eee;
    background: #fff;
    color: #333;
    width: 100%;
    // padding: 0 ;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 4px;
      height: 44%;
      background: $base-menu-color-active;
    }

    .icon {
      position: absolute;
      left: 0;
      top: 50%;
      //transform: translate(16px, -50%);
    }

    .filterIcon {
      //filter: drop-shadow(16px -50% #00afff);
      //filter: drop-shadow(#00afff 0px 0);
      filter: hue-rotate(90deg);
      transform: translate(50%, -50%);
    }

    .title-font {
      margin-left: 15px;
      font-size: $base-title-font-size;
      font-weight: 400;
    }

    .right-btn {
      display: flex;
      margin-right: 24px;
      cursor: pointer;

      .top-font {
        margin: 5px;
        vertical-align: middle;
        color: rgba(51, 51, 51, 0.50);
        font-weight: 400;
        font-size: $base-button-font-size;
      }
    }
  }

  .content-container {
    padding: 10px 5% 2%;
    background: #fff;
    height: calc(100% - 70px);
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    ::v-deep.empty-container {
      display: flex;
      justify-content: center;

      .empty-content {
        display: flex;
        flex-direction: column;
        margin-left: 32px;

        .empty-title {
          margin-bottom: 8px;
          font-size: 18px;
          font-weight: 700;
        }

        .empty-desc {
          margin-bottom: 21px;
          opacity: .5;
          font-size: 14px;
        }
      }
    }

    ::v-deep.table-expand-description {
      padding: 5px 64px;
      font-size: $base-content-font-size !important;

      .label {
        width: 120px;
        color: #0f0e0e;
        font-size: $base-content-font-size;
      }

      .content {
        width: calc(100% - 120px);
        white-space: normal !important;
        font-size: $base-content-font-size;
      }
    }

    ::v-deep.el-table {
      .el-table__cell {
        font-size: $base-content-font-size !important;
      }
    }

    ::v-deep.el-form {
      .el-form-item__label {
        font-size: $base-content-font-size !important;
      }
    }
  }

  .footer-container {
    text-align: center;
    padding: 10px 0;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 60px;
}

.scrollbar {
  width: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #C7C7C7;
}
</style>
